<template>
	<view>
		<view class="tab_box">
			<u-tabs :list="tabList" :is-scroll="false" :current="current" active-color="#DA251D" bar-width="60" font-size="32" @change="tabChange"></u-tabs>
		</view>
		<view class="order_list">
			<view v-for="(item, index) in orderList" :key="index" class="order_item" @click="toDetail(item)">
				<view class="item_top">
					<text>{{ item.state == 0 ? '待审核' : '已审核' }}</text>
					<text>{{ item.date }}</text>
				</view>
				<view class="content_box">
					<image :src="item.imgUrl" mode=""></image>
					<view class="content_right">
						<view class="title_box">
							<text>{{ item.title }}</text>
							<text>{{ item.proportion }}%</text>
						</view>
						<view class="text_box">导演：{{ item.director }}</view>
						<view class="text_box u-line-2">{{ item.introduce }}</view>
						<view class="sale_box">
							<u-line-progress
								:active-color="item.sale >= 100 ? '#D5D6DC' : '#EC5F58'"
								:percent="item.sale"
								inactive-color="#FFEBEA"
								:show-percent="false"
								height="34"
							></u-line-progress>
							<view class="sale_number" :style="'color:' + (item.sale >= 100 ? '#D5D6DC' : '#F1736D')">
								{{ item.sale >= 100 ? '已售罄' : '已售' + item.sale + '%' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty_box" v-if="orderList.length == 0">
			<image src="../../static/myImage/empty_order.png" mode=""></image>
			<text>空空如也，去看看吧~</text>
			<text class="btn" @click="toProject">去看看</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			tabList: [
				{
					name: '待审核'
				},
				{
					name: '已审核'
				}
			],
			orderList: [
				{
					id: 0,
					state: 0,
					date: '2020-11-03 10:11',
					imgUrl: '../../static/indexImage/11.png',
					title: '我和我的祖国',
					director: '陈凯歌',
					introduce: '该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。',
					sale: 60,
					proportion: 0.6
				},
				{
					id: 1,
					state: 1,
					date: '2020-11-03 10:11',
					imgUrl: '../../static/indexImage/12.png',
					title: '囧妈',
					director: '徐峥',
					introduce: '该片讲述一趟六天六夜的莫斯科之旅，让徐伊万和卢小花母子回到了',
					sale: 100,
					proportion: 0.3
				}
			]
		};
	},
	methods: {
		tabChange(index) {
			this.current = index;
		},
		toProject() {
			uni.switchTab({
				url: '../project/project'
			});
		},
		toDetail(info) {
			uni.navigateTo({
				url: '../orderDetail/orderDetail?info=' + JSON.stringify(info)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.tab_box {
	box-shadow: 0px 4px 8upx 0px rgba(4, 0, 0, 0.1);
}
.empty_box {
	width: 100%;
	height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	image {
		width: 186upx;
		height: 196upx;
		margin-bottom: 45upx;
	}
	text {
		font-size: 24upx;
		color: $color-666;
		margin-bottom: 58upx;
	}
	.btn {
		font-size: 30upx;
		color: #ffffff;
		padding: 15upx 53upx;
		border-radius: 8upx;
		background: #373846;
	}
}

.order_list {
	padding: 30upx;
	.order_item {
		margin-bottom: 30upx;
		padding: 30upx 20upx;
		box-shadow: 0px 4upx 10upx 0px rgba(4, 0, 0, 0.1);
		border-radius: 10upx;
		.item_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30upx;
			border-bottom: 2upx solid #eeeeee;
			text {
				font-size: 28upx;
				&:last-child {
					font-size: 24upx;
					color: $color-999;
				}
			}
		}
		.content_box {
			padding-top: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
				width: 230upx;
				height: 300upx;
				border-radius: 15upx;
				margin-right: 20upx;
			}
			.content_right {
				flex: 1;
				.text_box {
					font-size: 30upx;
					color: $color-666;
					margin-bottom: 30upx;
				}
				.title_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30upx;
					text {
						font-size: 32upx;
						&:last-child {
							color: $red;
							font-weight: bold;
						}
					}
				}
				.sale_box {
					display: flex;
					align-items: center;
					width: 100%;
					.sale_number {
						flex: 1;
						margin-left: 20upx;
						white-space: nowrap;
						font-size: 26upx;
					}
				}
			}
		}
	}
}
</style>
